<template>
  <div class="project-list">
    <!-- 任务列表页面 -->
    <div class="search">
      <div class="box1">
        <el-select
          v-model="page.status"
          placeholder="请选择项目状态"
          @change="searchBtn"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="box2">
        <el-input
          v-model="page.taskName"
          @change="searchBtn"
          clearable
          placeholder="任务名称"
        ></el-input>
      </div>
      <div class="box2">
        <el-input
          v-model="page.projectName"
          @change="searchBtn"
          clearable
          placeholder="所属项目名称"
        ></el-input>
      </div>
      <button @click="searchBtn">查询</button>
    </div>
    <button class="import" v-if="isAdmin === true" @click="handleimport">
      导入
    </button>
    <div class="table">
      <el-table
        v-loading="loading"
        :data="tableData"
        :header-cell-style="{
          textAlign: 'center',
          color: '#222',
          fontWeight: '400',
          fontSize: '14px',
          height: '62px',
        }"
        @sort-change="sortChange"
        :cell-class-name="cellStyle"
        :cell-style="{ textAlign: 'center', padding: '0' }"
        style="width: 98%; margin: 0 auto"
      >
        <!-- <el-table-column label="任务编号" prop="code"> </el-table-column> -->
        <el-table-column label="任务名称" min-width="180">
          <template slot-scope="scope">
            <a
              class="nameConact"
              :class="{
                nameConact1: scope.row.level === 0 || scope.row.level === null,
                nameConact2: scope.row.level === 1,
                nameConact3: scope.row.level === 2,
              }"
              style="color: #2fc0e0"
              @click="goin(scope.row.id)"
              >{{ scope.row.taskName }}</a
            >
          </template>
        </el-table-column>
        <el-table-column label="所属项目" prop="projectName" min-width="180">
          <template slot-scope="scope">
            <a
              class="nameConact"
              style="color: #2fc0e0"
              @click="
                goinProject(
                  scope.row.projectId,
                  scope.row.projectType,
                  scope.row.projectLabel
                )
              "
              >{{ scope.row.projectName }}</a
            >
          </template>
        </el-table-column>
        <el-table-column label="负责人" width="80">
          <template slot-scope="scope">
            <div class="reser" v-if="scope.row.charge.length !== 0">
              <div v-if="scope.row.charge[0] !== null">
                <p v-if="scope.row.charge[0].chargeRoleName.length === 1">
                  {{ scope.row.charge[0].chargeRoleName[0].roleName }}
                </p>
                <p v-else-if="scope.row.charge[0].chargeRoleName.length > 1">
                  多角色
                </p>
                <p v-else style="height: 18px"></p>
                <el-popover
                  v-if="scope.row.charge[0].chaurgeUrl !== ''"
                  placement="bottom"
                  width="75"
                >
                  <img slot="reference" :src="scope.row.charge[0].chargeUrl" />
                </el-popover>
                <p v-if="scope.row.charge[0].chargeName !== ''">
                  {{ scope.row.charge[0].chargeName }}
                </p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="执行角色" min-width="260">
          <template slot-scope="scope">
            <div class="col3">
              <div
                class="item"
                v-for="(member, index) in scope.row.implementList.slice(0, 4)"
                :key="index"
              >
                <p v-if="member !== null" style="height: 18px">
                  <span v-if="member.roleName.length === 1">{{
                    member.roleName[0].roleName
                  }}</span>
                  <span v-else-if="member.roleName.length > 1">多角色</span>
                  <span v-else></span>
                </p>
                <el-popover
                  v-if="member !== null"
                  placement="bottom"
                  width="300"
                >
                  <img slot="reference" :src="member.userUrl" />
                </el-popover>
                <p v-if="member !== null">{{ member.userName }}</p>
              </div>
              <div
                v-if="scope.row.implementList.length > 4"
                class="moremissioner"
              >
                等{{ scope.row.implementList.length }}人
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="审核人" width="80">
          <template slot-scope="scope">
            <div class="checkers" style="text-align: center">
              <p v-for="(checker, index) in scope.row.examineList" :key="index">
                {{ checker }}
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column sortable="custom" label="等级" prop="priority">
          <template slot-scope="scope">
            <span
              class="misLV"
              :class="{
                LvOne: scope.row.priority <= 100,
                LvTwo: (scope.row.priority <= 200) & (scope.row.priority > 100),
                LvThree: scope.row.priority > 200,
              }"
              >LV {{ scope.row.priority }}</span
            >
          </template>
        </el-table-column>
        <el-table-column sortable="custom" label="开始时间" prop="startTime">
        </el-table-column>
        <el-table-column sortable="custom" label="结束时间" prop="endTime">
        </el-table-column>
        <el-table-column label="进度" width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.status === 1">
              <el-progress
                class="progressBox1"
                :text-inside="true"
                :stroke-width="20"
                :percentage="scope.row.taskProgress"
                status="exception"
              ></el-progress>
            </div>
            <div v-else>
              <el-progress
                class="progressBox2"
                :text-inside="true"
                :stroke-width="20"
                :percentage="scope.row.taskProgress"
                status="exception"
              ></el-progress>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="过期" width="60">
          <template slot-scope="scope">
            <span style="color: #d82d2d" v-if="scope.row.day"
              >{{ scope.row.day }}天</span
            >
            <span v-else> 正常 </span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <div v-if="scope.row.status === 1">
              <div>
                <img
                  v-if="
                    scope.row.taskAndProjectUser.projectChargeId.indexOf(
                      userid
                    ) !== -1 ||
                    scope.row.taskAndProjectUser.projectCreateId.indexOf(
                      userid
                    ) !== -1 ||
                    scope.row.taskAndProjectUser.taskChargeId.indexOf(
                      userid
                    ) !== -1 ||
                    scope.row.taskAndProjectUser.taskCreateId === userid ||
                    isAdmin === true
                  "
                  class="btnImgBox"
                  title="开始任务"
                  src="@/assets/taskkaishi1.png"
                  alt=""
                  @click="startBtn(scope.row)"
                />
              </div>
            </div>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <div
      v-if="tableData.length !== 0"
      style="text-align: center"
      class="pagbox"
    >
      <el-pagination
        v-model="page"
        background
        layout="prev, pager, next"
        :total="page.total"
        :page-size="page.pageSize"
        :current-page="page.page"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <!-- 导入弹层 -->
    <daoru
      :showimport.sync="showimport"
      :token="token"
      @updateList="getTaskList"
    ></daoru>
  </div>
</template>

<script>
import { getTaskList, taskStart } from '@/api/task/task.js';
import daoru from './firsttabs/footertab/importTask.vue';
export default {
  name: 'projectList',
  components: {
    daoru
  },
  data() {
    return {
      token: sessionStorage.getItem('usertoken'),
      options: [{
        value: null,
        label: '全部任务'
      }, {
        value: 1,
        label: '未开始'
      }, {
        value: 3,
        label: '进行中'
      }, {
        value: 4,
        label: '已结束'
      }],
      showimport: false, // 导入弹层控制
      usertype: parseInt(sessionStorage.getItem('usertype')), // 当前用户属性
      userid: parseInt(sessionStorage.getItem('userid')), // 当前用户属性
      loading: true,
      tableData: [],
      isAdmin: false, // 是否是管理员
      page: {
        page: 1,
        pageSize: 5,
        startDate: null, // 任务开始时间排序，1-倒序 0-升序
        endDate: null, // 任务结束时间排序，1-倒序 0-升序
        level: null, // 任务等级排序，1-倒序 0-升序
        total: null,
        userId: parseInt(sessionStorage.getItem('userid')),
        projectName: '',
        taskName: '',
        userType: parseInt(sessionStorage.getItem('usertype')),
        status: 3
      }
    };
  },
  mounted() {},
  created() {
    this.getIsStatus();
    this.getTaskList();
  },
  methods: {
    formatDate(date, fmt = 'yyyy-MM-dd') {
      if (!(date instanceof Array)) {
        date = new Date(date);
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      const o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      };
      for (const k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          const str = o[k] + '';
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str));
        }
      }
      return fmt;
    },
    padLeftZero(str) {
      return ('00' + str).substr(str.length);
    },
    // 设置表格第三列文字为左对齐
    cellStyle({ row, column, rowIndex, columnIndex }) {
      // 第n(3)列的时候，才改变
      if (columnIndex === 0 || columnIndex === 1) {
        return `colStyle`;
      }
    },
    // 任务列表
    async getTaskList() {
      const list = await getTaskList(this.page);
      // console.log(list);
      list.data.forEach(item => {
        if (item.startTime !== null) {
          // 处理时间格式
          item.startTime = this.formatDate(item.startTime);
        }
        if (item.endTime !== null) {
          // 处理时间格式
          item.endTime = this.formatDate(item.endTime);
        }
        if (item.taskProgress > 100) {
          item.taskProgress = parseInt(100);
        } else {
          item.taskProgress = parseInt(item.taskProgress);
        }
        // console.log(item);
      });
      this.loading = false;
      this.tableData = list.data;
      this.page.total = list.totalcount;
      console.log(this.tableData);
    },
    // 排序 {column,prop,order} 列数据|排序字段|排序方式
    sortChange(column) {
      // console.log(column);
      this.page.startDate = null;
      this.page.endDate = null;
      this.page.level = null;
      if (column.order === null) {
        this.page.startDate = null;
        this.page.endDate = null;
        this.page.level = null;
      }
      if (column.prop === 'priority' && column.order === 'ascending') {
        this.page.level = 0;
      }
      if (column.prop === 'priority' && column.order === 'descending') {
        this.page.level = 1;
      }
      if (column.prop === 'startTime' && column.order === 'ascending') {
        this.page.startDate = 0;
      }
      if (column.prop === 'startTime' && column.order === 'descending') {
        this.page.startDate = 1;
      }
      if (column.prop === 'endTime' && column.order === 'ascending') {
        this.page.endDate = 0;
      }
      if (column.prop === 'endTime' && column.order === 'descending') {
        this.page.endDate = 1;
      }
      this.getTaskList();
    },
    // 判断是否是管理员
    getIsStatus() {
      if (parseInt(sessionStorage.getItem('usertype')) === 1) {
        this.isAdmin = true;
      } else {
        this.isAdmin = false;
      }
    },
    // 翻页
    handleCurrentChange(currentPage) {
      this.page.page = currentPage;
      this.getTaskList();
    },
    searchBtn() {
      this.page.page = 1;
      this.getTaskList();
    },
    // 任务跳转
    goin(id) {
      this.$router.push({
        name: 'Misinfo&intro',
        params: {
          index: 0,
          currentView: 'info'
        }
      });
      localStorage.setItem('taskId', id);
    },
    // 项目跳转
    goinProject(id, projectType, label) {
      // console.log(id);
      if (projectType === 1) {
        this.$router.push({
          name: 'Prodetail',
          params: {
            projectId: id,
            projectLabel: label,
            index: 0,
            currentView: 'survey'
          }
        });
        localStorage.setItem('projectId', id);
      } else {
        this.$router.push({
          name: 'Agileproject',
          params: {
            projectId: id,
            projectLabel: label,
            index: 0,
            currentView: 'survey'
          }
        });
        localStorage.setItem('projectId', id);
      }
    },
    // 任务开始
    async startBtn(o) {
      console.log(o);
      if (o.charge.length === 0) {
        return this.$message({
          showClose: true,
          message: '请添加任务负责人！',
          type: 'warning'
        });
      }
      if (o.implementList.length === 0) {
        return this.$message({
          showClose: true,
          message: '请添加任务执行人！',
          type: 'warning'
        });
      }
      if (o.examineList.length === 0) {
        return this.$message({
          showClose: true,
          message: '请添加任务审核人！',
          type: 'warning'
        });
      }
      this.$confirm('是否开始任务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await taskStart({taskId: o.id});
        // 刷新列表
        this.page.page = 1;
        this.getTaskList();
        if (res.code === 200) {
          return this.$message({
            showClose: true,
            message: '任务开始成功！',
            type: 'success'
          });
        } else {
          return this.$message({
            showClose: true,
            message: res.msg,
            type: 'error'
          });
        }
      });
    },
    // 导入
    handleimport() {
      this.showimport = true;
    }
  }
};
</script>

<style lang="less" scoped>
.project-list {
  position: relative;
  width: calc(100% - 40px);
  padding: 0 20px;
  .search {
    width: 850px;
    height: 40px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    .box1 {
      position: relative;
      width: 195px;
      font-size: 12px;
    }
    .box2 {
      width: 255px;
      height: 32px;
      background: #ffffff;
      border-radius: 3px;
      border: 1px solid #f1f4ff;
    }
    button {
      cursor: pointer;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 25px;
      width: 85px;
      height: 34px;
      background: #2fc0e0;
      border-radius: 4px;
      box-shadow: 0 0 5px #2fc0e0;
      margin-top: 5px;
    }
  }
  .import {
    position: absolute;
    top: 0;
    right: 20px;
    cursor: pointer;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 25px;
    width: 85px;
    height: 34px;
    background: #2fc0e0;
    border-radius: 4px;
    box-shadow: 0 0 5px #2fc0e0;
    margin-top: 5px;
  }
  .table {
    // height: 70vh;
    background: #ffffff;
    box-shadow: 1px 2px 3px 0px rgba(153, 153, 153, 0.5);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow-y: auto;
    .el-table {
      border: none;
      tr {
        td {
          .nameConact:hover {
            text-decoration: underline #2fc0e0;
          }
          .nameConact1:before {
            content: "";
            display: inline-block;
            width: 5px;
            height: 16px;
            background: #1160cf;
            border-radius: 3px;
            margin-right: 5px;
          }
          .nameConact2:before {
            content: "";
            display: inline-block;
            width: 5px;
            height: 16px;
            background: #b9110b;
            border-radius: 3px;
            margin-right: 5px;
          }
          .nameConact3:before {
            content: "";
            display: inline-block;
            width: 5px;
            height: 16px;
            background: #29a709;
            border-radius: 3px;
            margin-right: 5px;
          }
          img {
            width: 45px;
            height: 45px;
            border-radius: 50%;
          }
          .btnImgBox {
            width: 35px;
            height: 35px;
            cursor: pointer;
          }
          p {
            margin: 0 auto;
            font-size: 12px;
            font-weight: 400;
            color: #555555;
            min-width: 70px;
            // white-space: nowrap; /*强制在一行显示*/
            // text-overflow: ellipsis; /*设置超出内容显示...*/
            // overflow: hidden; /*一定不能少 超出的内容进行隐藏*/
          }
          .col3 {
            width: 100%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            .item {
              img {
                text-align: center;
                width: 45px;
                height: 45px;
                border-radius: 50%;
                box-shadow: 1px 1px 3px #d7d7d7;
              }
              p {
                color: #555;
                margin: 0;
                max-width: 80px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333;
                text-align: center;
              }
            }
            .moremissioner {
              width: 45px;
              height: 45px;
              line-height: 45px;
              border-radius: 50%;
              background: #e8f8fb;
              box-shadow: 1px 1px 2px 0px rgba(215, 215, 215, 0.5);
              border: 1px solid #ffffff;
              color: #2fc0e0;
              font-size: 12px;
              text-align: center;
            }
          }
          .checkers {
            margin: 0;
            p {
              width: 100%;
              margin: 0;
            }
          }
          .misLV {
            height: 21px;
            width: 100%;
            font-size: 12px;
            font-family: SukhumvitSet-Bold;
            // background-color: #e8f8ec;
            text-align: center;
            line-height: 21px;
            display: inline-block;
            border-radius: 15px;
            // margin-left: 12px;
            // color: #fff;
          }
          .LvOne {
            // background: #c5f5d1;
            color: blue;
          }
          .LvTwo {
            // background: #f7cbd2;
            color: red;
          }
          .LvThree {
            // background: #cbd5f5;
            color: green;
          }
          .reser {
            width: 100%;
            text-align: center;
            img {
              text-align: center;
              width: 45px;
              height: 45px;
              border-radius: 50%;
              box-shadow: 1px 2px 3px #d7d7d7;
            }
          }
        }
      }
    }
  }
  /deep/.colStyle {
    .cell {
      text-align-last: left;
    }
  }
  .el-pagination {
    margin: 20px auto;
    padding-bottom: 20px;
    /deep/.btn-prev {
      width: 32px;
      height: 32px;
      background-color: #faf9ff;
    }
    /deep/.btn-next {
      width: 32px;
      height: 32px;
      background-color: #faf9ff;
    }
  }
  /deep/.el-icon-arrow-left:before {
    font-size: 20px;
    color: #555555;
  }
  /deep/.el-icon-arrow-right:before {
    font-size: 20px;
    color: #555555;
  }
  /deep/.el-pager li {
    width: 32px;
    height: 32px;
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    line-height: 32px;
    border-radius: 50% !important;
    background-color: #faf9ff !important;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: linear-gradient(180deg, #1160cf 0%, #cd06bf 100%) !important;
    color: #ffffff !important;
    box-shadow: 0px -1px 5px #1160cf, 0px 1px 5px #cd06bf;
  }
  /deep/ .progressBox1 .el-progress-bar__outer {
    background-color: #ebeef5;
    height: 20px !important;
  }
  /deep/ .progressBox2 .el-progress-bar__outer {
    background-color: #e8f8fb;
    height: 20px !important;
  }
  /deep/ .el-progress-bar__innerText {
    font-size: 12px;
    font-family: DIN Alternate Bold;
  }
  /deep/ .el-progress.is-exception .el-progress-bar__inner {
    background-image: linear-gradient(90deg, #2fc0e0);
    text-align: center;
  }
  // /deep/ .el-button--success {
  //   background-color: #f0fff6;
  //   border-color: #f0fff6;
  // }
  // /deep/ .el-button--success .el-icon-video-play {
  //   font-size: 32px;
  //   color: #59d088;
  // }

  // /deep/ .el-select__caret {
  //   transition: none;
  //   transform: rotateZ(0deg);
  //   margin-right: 5px;
  // }
  // /deep/ .el-icon-arrow-up::before {
  //   content: "";
  //   width: 39px;
  //   height: 39px;
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   border-left: 1px solid #ccd9f9;
  //   background: url("~@/assets/triangle.png") no-repeat center center;
  //   background-size: 12px 21px;
  // }
}
</style>
